<template>
  <div class="login">
    <!-- 登录表单容器 -->
    <div class="formContainer">
      <h3>就业管理系统</h3>
      <!-- 登录表单 -->
       <!-- 表单引用，用于触发表单验证 -->
           <!-- 绑定表单数据模型 -->
                <!-- 表单验证规则 -->
                  <!-- 标签宽度 -->
      <el-form 
        ref="loginFormRef"          
        :model="loginForm"       
        :rules="loginRules"        
        label-width="80px"         
        class="loginform"
      >
        <!-- 用户名输入项 -->
        <el-form-item label="用户名" prop="username">
          <!-- 双向绑定用户名 -->
            <!-- 关闭浏览器自动填充 -->
          <el-input 
            v-model="loginForm.username"  
            autocomplete="off"           
          />
        </el-form-item>

        <!-- 密码输入项 -->

        <el-form-item label="密码" prop="password">
           <!-- 双向绑定密码 -->
            <!-- 密码输入模式 -->
               <!-- 关闭浏览器自动填充 -->
          <el-input 
            v-model="loginForm.password" 
            type="password"               
            autocomplete="off"          
          />
        </el-form-item>

        <!-- 身份选择项 -->
        <el-form-item label="身份" prop="identity">
          <div>
            <!-- 单选组：学生/教师身份选择 -->
            <el-radio-group v-model="loginForm.identity">
              <el-radio-button label="学生" value="student" />
              <el-radio-button label="教师" value="teacher" />
              <el-radio-button label="管理员" value="user" />
            </el-radio-group>
          </div>
        </el-form-item>

        <!-- 操作按钮组 -->
        <el-form-item>
           <!-- 主按钮样式 -->
            <!-- 点击触发登录逻辑 -->
          <el-button 
            type="primary"   
            @click="submitForm()"  
          >登录</el-button>
          <!-- 主按钮样式 -->
           <!-- 点击触发注册逻辑 -->
          <el-button 
            type="primary"    
            @click="registForm()"  
          >注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
// 引入Vue组合式API
import { reactive, ref } from 'vue';
// 引入路由钩子
import { useRouter } from 'vue-router';
// 引入HTTP请求库
import axios from 'axios';
// 引入Element Plus消息提示组件
import { ElMessage } from 'element-plus';
// 引入Vuex状态管理钩子
import { useStore } from 'vuex';

// 获取Vuex存储实例
const store = useStore();
// 表单数据模型
const loginForm = reactive({
  username: "",        // 用户名
  password: "",        // 密码
  identity: "学生",    // 身份（默认学生）
  gender: "",          // 性别（注册用）
  introduction: ""     // 个人简介（注册用）
});
// 表单引用对象
const loginFormRef = ref();

// 表单验证规则
const loginRules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" }  // 用户名必填，失去焦点时验证
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" }     // 密码必填，失去焦点时验证
  ],
  identity: [
    { required: true, message: "请选择身份", trigger: "blur" }      // 身份必填，失去焦点时验证
  ]
});

// 获取路由实例
const router = useRouter();

/**
 * 登录表单提交处理函数
 */
const submitForm = () => {
  // 触发表单验证
  loginFormRef.value.validate(async (valid) => {
    if (valid) { // 验证通过
      try {
        // 发送登录请求
        const loginRes = await axios.post("/user/login", loginForm);
        console.log("登录响应:", loginRes.data);

        if (loginRes.data.code === 0) { // 登录成功
          // 获取用户信息
          const userInfoRes = await axios.get(`/user/findByUsername?username=${loginForm.username}`);
          const userInfo = userInfoRes.data.data;
          
          // 存储用户信息和Token
          localStorage.setItem("token", userInfo.username); // 实际应存储Token，此处为示例
          store.commit("changeUserInfo", userInfo); // 更新Vuex中的用户信息

          ElMessage.success("登录成功"); // 提示成功

          // 根据用户角色跳转不同页面
          if (userInfo.role === "学生") {
            router.push("/prepare/material"); // 学生跳转路径
          } else if (userInfo.role === "教师") {
            router.push("/center"); // 教师跳转路径
          }else if (userInfo.role === "管理员") {
            router.push("/center"); // 管理员跳转路径
          }
        } else if (loginRes.data.code === 1) { // 登录失败
          ElMessage.error(loginRes.data.message); // 显示错误信息
        }
      } catch (error) {
        ElMessage.error("登录失败，请检查网络连接"); // 异常处理
      }
    }
  });
};

/**
 * 注册表单提交处理函数
 */
const registForm = () => {
  // 触发表单验证（注册复用登录表单的验证规则，需根据实际调整）
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 构造注册数据（包含角色、性别等扩展字段）
        const registData = {
          username: loginForm.username,
          password: loginForm.password,
          role: loginForm.identity, // 身份作为角色字段
          gender: loginForm.gender,
          introduction: loginForm.introduction
        };

        // 发送注册请求
        const registRes = await axios.post("/user/regist", registData);
        console.log("注册响应:", registRes.data);

        if (registRes.data.code === 1) { // 注册失败
          ElMessage.error(registRes.data.message);
        } else if (registRes.data.code === 0) { // 注册成功
          ElMessage.success("注册成功，请登录");
        }
      } catch (error) {
        ElMessage.error("注册失败，请重试");
      }
    }
  });
};

// // 测试用函数（开发调试用，生产环境删除）
// const test = async () => {
//   const testRes = await axios.get("/test");
//   console.log("测试接口响应:", testRes);
// };
</script>

<style lang="scss" scoped>
.login {
  /* 登录页面背景设置 */
  background: url("../assets/bg.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  margin-top: -65px;
  margin-left: -10px;
  background-size: 100% 100%;
  background-attachment: fixed; // 背景固定不滚动
}

.formContainer {
  /* 表单容器样式 */
  width: 500px;
  height: 300px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); // 居中布局
  background: rgba(0, 0, 0, 0.5); // 半透明黑色背景
  color: white;
  text-align: center;
  padding: 20px;

  h3 {
    font-size: 30px;
    margin-bottom: 20px; // 标题与表单间距
  }

  .loginform {
    margin-top: 20px; // 表单内边距
  }
}

/* 穿透样式：修改Element Plus表单标签颜色为白色 */
::v-deep .el-form-item__label {
  color: white;
}
</style>